---
title: Botones
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Una lista de botones y grupos de botones utilizados en toda la aplicación.

## Botón

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| "Props"       | Tipo                  | Descripción                                                                                                                                                      |
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| "className"   | "cadena"              | Nombre de clase opcional para estilos adicionales                                                                                                                |
| Ícono         | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón                                                                                                  |
| título        | "cadena"              | El contenido de texto del botón                                                                                                                                  |
| "fullWidth"   | booleano              | Define si el botón debe abarcar todo el ancho de su contenedor                                                                                                   |
| variante      | cadena                | La variante de estilo visual del botón. Las opciones incluyen `primario`, `secundario` y `terciario`                                             |
| tamaño        | cadena                | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano`                                                                   |
| posición      | cadena                | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `derecha` y `central` |
| acento        | cadena                | El color de acento del botón. Las opciones incluyen: `predeterminado`, `azul` y `peligro`                                        |
| próximamente  | booleano              | Indica si el botón está marcado como "próximamente" (como para funciones futuras)                                                             |
| "desactivado" | booleano              | Especifica si el botón está deshabilitado o no                                                                                                                   |
| enfoque       | booleano              | Determina si el botón tiene foco                                                                                                                                 |
| alHacerClic   | "función"             | Una función de callback que se activa cuando el usuario hace clic en el botón                                                                                    |

</Tab>

</Tabs>

## Grupo de Botones

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| "Props"           | Tipo                  | Descripción                                                                                                                                                     |
| ----------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| "className"       | "cadena"              | "Nombre opcional para estilización adicional"                                                                                                                   |
| Ícono             | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón                                                                                                 |
| título            | cadena                | El contenido de texto del botón                                                                                                                                 |
| tamaño            | "cadena"              | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano`                                                                  |
| posición          | "cadena"              | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `central`, `derecha` |
| aplicarSombra     | booleano              | Determina si se aplica sombra a un botón                                                                                                                        |
| aplicarDesenfoque | booleano              | Determina si se aplica un efecto de desenfoque al botón                                                                                                         |
| "desactivado"     | booleano              | Determina si el botón está deshabilitado                                                                                                                        |
| enfoque           | booleano              | Indica si el botón tiene foco                                                                                                                                   |

</Tab>
</Tabs>

## Grupo de Botones Flotantes

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| "Props" | Tipo      | Descripción                                                                                    | Predeterminado |
| ------- | --------- | ---------------------------------------------------------------------------------------------- | -------------- |
| tamaño  | cadena    | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` | pequeño        |
| hijos   | ReactNode | Una matriz de elementos React que representan los botones individuales dentro del grupo        |                |

</Tab>

</Tabs>

## Botón de Ícono Flotante

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| "Props"           | Tipo                  | Descripción                                                                                                                                                      |
| ----------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| "className"       | cadena                | "Nombre opcional para estilización adicional"                                                                                                                    |
| Ícono             | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón                                                                                                  |
| tamaño            | cadena                | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano`                                                                   |
| posición          | cadena                | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `derecha` y `central` |
| aplicarSombra     | booleano              | Determina si se aplica sombra a un botón                                                                                                                         |
| aplicarDesenfoque | booleano              | Determina si se aplica un efecto de desenfoque al botón                                                                                                          |
| "desactivado"     | booleano              | Determina si el botón está deshabilitado                                                                                                                         |
| enfoque           | booleano              | Indica si el botón tiene foco                                                                                                                                    |
| alHacerClic       | "función"             | Una función de callback que se activa cuando el usuario hace clic en el botón                                                                                    |
| esActivo          | booleano              | Determina si el botón está en estado activo                                                                                                                      |

</Tab>

</Tabs>

## Grupo de Botones de Ícono Flotante

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| "Props"     | Tipo     | Descripción                                                                                                                                                                                                                                                                                  |
| ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| "className" | "cadena" | "Nombre opcional para estilización adicional"                                                                                                                                                                                                                                                |
| tamaño      | "cadena" | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano`                                                                                                                                                                                               |
| iconButtons | array    | An array of objects, each representing an icon button in the group. Cada objeto debe incluir el componente de ícono que desea mostrar en el botón, la función que desea llamar cuando un usuario hace clic en el botón y si el botón debe estar activo o no. |

</Tab>

</Tabs>

## Botón Claro

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| "Props"       | Tipo              | Descripción                                                                                                 |
| ------------- | ----------------- | ----------------------------------------------------------------------------------------------------------- |
| "className"   | cadena            | "Nombre opcional para estilización adicional"                                                               |
| ícono         | `React.ReactNode` | El ícono que desea mostrar en el botón                                                                      |
| título        | cadena            | El contenido de texto del botón                                                                             |
| acento        | cadena            | El color de acento del botón. Opciones incluyen: `secundario` y `terciario` |
| activo        | booleano          | Determina si el botón está en estado activo                                                                 |
| deshabilitado | booleano          | Determina si el botón está deshabilitado                                                                    |
| enfoque       | booleano          | Indica si el botón tiene foco                                                                               |
| alHacerClic   | "función"         | Una función de callback que se activa cuando el usuario hace clic en el botón                               |

</Tab>

</Tabs>

## Botón de Ícono Claro

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| "Props"       | Tipo                  | Descripción                                                                                                 |
| ------------- | --------------------- | ----------------------------------------------------------------------------------------------------------- |
| "className"   | cadena                | "Nombre opcional para estilización adicional"                                                               |
| testId        | cadena                | Identificador de prueba para el botón                                                                       |
| Ícono         | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón                                             |
| título        | "cadena"              | El contenido de texto del botón                                                                             |
| tamaño        | "cadena"              | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano`              |
| acento        | cadena                | El color de acento del botón. Opciones incluyen: `secundario` y `terciario` |
| activo        | booleano              | Determina si el botón está en estado activo                                                                 |
| "desactivado" | booleano              | Determina si el botón está deshabilitado                                                                    |
| enfoque       | booleano              | Indica si el botón tiene foco                                                                               |
| alHacerClic   | "función"             | Una función de callback que se activa cuando el usuario hace clic en el botón                               |

</Tab>

</Tabs>

## Botón Principal

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| "Props"                    | Tipo                             | Descripción                                                                                          |
| -------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
| título                     | cadena                           | El contenido de texto del botón                                                                      |
| "fullWidth"                | booleano                         | Define si el botón debe abarcar todo el ancho de su contenedor                                       |
| variante                   | "cadena"                         | La variante de estilo visual del botón. Options include `primary` and `secondary`    |
| próximamente               | booleano                         | Indica si el botón está marcado como "próximamente" (como para funciones futuras) |
| Ícono                      | `React.ComponentType`            | Un componente de ícono opcional que se muestra dentro del botón                                      |
| Propiedades React `button` | `React.ComponentProps<'button'>` | Se admiten todas las propiedades estándar del botón HTML                                             |

</Tab>

</Tabs>

## Botón de Icono Redondeado

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| "Props"                    | Tipo                                            | Descripción |
| -------------------------- | ----------------------------------------------- | ----------- |
| Ícono                      | `React.ComponentType`                           |             |
| Propiedades React `button` | `React.ButtonHTMLAttributes<HTMLButtonElement>` |             |

</Tab>

</Tabs>
